<template>
        <div class="process" v-if="process.length">
            <div style="display: flex;">
                <!-- <div style="display: flex;justify-content: center;flex-direction: column;">
                  <div class="circular"></div>
                </div> -->
                  <div class="item" v-for="(item,index) in process"
                    :style="{marginTop:index%2?'59px':'0px',flexDirection:index%2?'column-reverse':'column'}">
                      <div class="item_text" v-if="item.length>10">
                        <el-popover
                          placement="top-start"
                          width="200"
                          trigger="hover"
                          :content="item">
                          <div style="text-align: center;line-height: 20px;height: 20px;" slot="reference">
                            {{item.substring(0,10)}}...
                          </div>
                        </el-popover>
                      </div>
                      <div class="item_text" v-else>{{item}}</div>
                      <div class="item_circular"  :style="{background:index<ind?'#3a8dfd':ind==index?'#E83112':''}"/>
                      <div class="item_vertical" :style="{background:index<ind?'#3a8dfd':ind==index?'#E83112':''}"/>
                      <div class="item_transverse" :style="{ marginTop:index%2?'-9px':'0px'}"/>
                       <!--  -->
                     <div class="item_circular_big"
                      :style="{borderColor:index<ind?'#3a8dfd':ind==index?'#E83112':'',marginTop:index%2?'0px':'-10px'}">
                      {{index+1}}
                      </div>
                  </div>
                  <div>
                    <i class="el-icon-arrow-right" style="color: #a3a2a6;"/>
                  </div>
            </div>
        </div>
</template>

<script>


export default {
  name: "process",
  components: {
  },
  props: {

  },
  data() {
    return {
      applyProcess:['资源申请','委办局管理员审核','监管平台接收','监管平台初核','大数据中心复核',
                '监管平台派发', '云服务商处理',   '监管平台确认','用户确认'],
      changeProcess:['资源变更','委办局管理员审核','监管平台接收','监管平台初核','大数据中心复核',
                '监管平台派发', '云服务商处理',   '监管平台确认','用户确认'],
      process:[],
      ind:0,
    };
  },
  created() {

  },
  methods: {
    init(data){
      if(data.definitionName=='资源变更'){
        this.process=this.changeProcess
      }else if(data.definitionName=='资源申请'){
        this.process=this.applyProcess
      }
      this.ind=this.process.indexOf(data.taskName)
    }
  }
};
</script>
<style scoped lang="less">
  .process{
    font-size: 12px;
    background: #faf9ff;
    border-radius: 10px;
    padding: 10px;
      .circular{
        width: 10px;
        height: 10px;
        border-radius: 20px;
        background: #606266;
      }
      i{
        font-size:30px;
        margin: 54px 0 0 -20px;
        color: #606266;
      }
      .item{
        display: flex;
        flex-direction: column;
        // background: red;
        // height: 80px;
        padding: 0;
        .item_text{
          text-align: center;
          line-height: 20px;
          height: 20px;
          // display: flex;
          // justify-content: center;
        }
        .item_circular{
          margin-left: calc(50% - 5px);
          width: 10px;
          height: 10px;
          border-radius: 10px;
          background: #a3a2a6;
        }
        .item_circular_big{
          margin-top: -10px;
          margin-left: calc(50% - 9px);
          width: 18px;
          height: 18px;
          border-radius: 18px;
          border: 2px solid #a3a2a6;
          background: white;
          text-align: center;
          font-size: 12px;
        }
        .item_vertical{
          margin-left: calc(50% - 1px);
          margin-top: -2px;
          width: 2px;
          height: 40px;
          background: #a3a2a6;
        }
        .item_transverse{
          height: 2px;
          background: #a3a2a6;
          padding: 0 60px;
        }
      }
  }
</style>
